import { useState, useEffect } from "react";
import { Modal, Alert, Form, Radio, Button, Card, Switch, Row, Col, Space, message } from "antd";
import { SettingTwoTone, FolderOpenTwoTone } from "@ant-design/icons";
import { CommonModal } from "@/views/components/CommonModal";
import { batchDelGoodsSpu, batchDelGoodsSku } from "@/pages/GoodsModule/systemGoods/service";
import SelectBatchDeleteGoodsModal from "../SelectBatchDeleteGoodsModal";

const BatchDeleteGoodsModal = props => {
	const { isSkuType, setTabValue, fetchList, selectedKeys, onCancel } = props;
	const [visible, setVisible] = useState(false);
	const [deleteIds, setDeleteIds] = useState();

	const handleOk = () => {
		isSkuType
			? batchDelGoodsSku({ ids: selectedKeys }).then(res => {
					const { success, msg, data } = res;
					if (JSON.stringify(data) === "{}") {
						message.success(msg);
						onCancel();
						fetchList();
						return;
					}
					if (data.noDelList.length) {
						setDeleteIds(data.canDelList);
						setVisible(true);
					}
				})
			: batchDelGoodsSpu({ ids: selectedKeys }).then(res => {
					const { success, msg, data } = res;
					if (JSON.stringify(data) === "{}") {
						message.success(msg);
						onCancel();
						fetchList();
						return;
					}
					if (data.noDelList.length) {
						setDeleteIds(data.canDelList);
						setVisible(true);
					}
				});
	};
	return (
		<CommonModal
			title={{ title: "批量删除商品资料" }}
			open={true}
			width="528px"
			okText="保存"
			onCancel={props.onCancel}
			footer={
				<Row justify="space-between" style={{ alignItems: "center" }}>
					<Col className="common-color11">
						当前勾选生效<span className="common-color9"> {selectedKeys.length ?? 0} </span>条商品
					</Col>
					<Col>
						<Space>
							<Button size="middle" onClick={props.onCancel}>
								取消
							</Button>
							<Button size="middle" type="primary" onClick={handleOk}>
								保存
							</Button>
						</Space>
					</Col>
				</Row>
			}
		>
			<Alert message="本操作仅删除商品资料，商品已存在的订单和库存数据不执行删除" type="info" showIcon />
			<p style={{ margin: "16px 0" }} className="common-color11">
				确定删除当前勾选的商品吗？
			</p>
			{visible && (
				<SelectBatchDeleteGoodsModal
					isSkuType={isSkuType}
					setTabValue={setTabValue}
					deleteIds={deleteIds}
					fetchList={fetchList}
					selectedKeys={selectedKeys}
					onCancel={onCancel}
				></SelectBatchDeleteGoodsModal>
			)}
		</CommonModal>
	);
};
export default BatchDeleteGoodsModal;
